<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/my-style.css">
    <title>双色球生成器-react版</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
            list-style: none;
        }

        #app {
            width: 1200px;
            margin: auto;
        }

        .ball {
            width: 40px;
            height: 40px;
            text-align: center;
            border-radius: 50%;
            line-height: 40px;
            font-weight: 600;
            font-size: 110%;
            color: #fff;
            display: inline-block;
        }

        .red-ball {
            background-color: #f30000;
            margin-right: 10px;
        }

        .blue-ball {
            background-color: #2663fb;

        }

        #result-box>li {
            display: flex;
            padding: 5px 10px;
        }
    </style>
</head>

<body>
    <div id="app">

    </div>
</body>
<script src="../../js/react.development.js"></script>
<script src="../../js/react-dom.development.js"></script>
<script src="../../js/babel.min.js"></script>
<script type="text/babel">
    // Fragment: 空的结构标签
    // useState: 使用状态的钩子函数
    // useRef: 获取ref的钩子函数
    const { Fragment, useState, useRef } = React;

    // 获取随机数：[0,max)
    function getRandom(max) {
        return Math.floor(Math.random() * max);
    }

    const red = [];

    const blue = [];

    /**
     * 初始化
     */
    function initBall() {
        // 红球：1-33 篮球：1-16
        for (let i = 1; i <= 33; i++) {
            red.push(i);
            if (i <= 16) {
                blue.push(i);
            }
        }
    }

    /*
     * 随机一注双色球
     */
    function getOne() {
        // 将红色球的池子，拷贝到新数组中
        let red2 = red.map(v => v);

        let result = [];

        // 随机六个红色球
        for (let i = 0; i < 6; i++) {
            let index = getRandom(red2.length);
            let value = red2.splice(index, 1);
            result.push(value[0]);
        }

        // 排序
        result.sort((n, m) => n - m);

        // 添加蓝球
        let index = getRandom(blue.length);
        result.push(blue[index]);

        return result;

    }

    initBall();

    // 上面表单
    function Form(props) {
        // const [value,setValue] = useState(5);
        const inputRef = useRef();

        function handleSubmit() {
            const value = inputRef.current.value;
            if (value) {
                props.updateValue(value);
            }
        }

        return (
            <div className="form">
                <div className="form-item">
                    <label className="form-item__label" htmlFor="count">随机注数</label>
                    <div className="form-item__content">
                        <input className="input" type="number" id="count" step="1" max="99" min="1" maxLength="2" defaultValue={5} ref={inputRef} />
                    </div>
                </div>
                <div className="form-item">
                    <button
                        id="submit"
                        className="button button--primary"
                        style={{ marginLeft: '120px' }}
                        onClick={handleSubmit}>确认</button>
                </div>
            </div >
        )
    }

    // 下面内容
    function Descriptions(props) {


        function Row(props) {
            let length = props.balls.length;
            return (
                <li>
                    {props.balls.map((v,i) => <span key={i + '-' + v} className={'ball ' + (i == length - 1 ? 'blue-ball' : 'red-ball')}>{v}</span>)}
                </li>
            )
        }


        return (
            <section className="descriptions">
                <header className="descriptions__header">
                    结果
                </header>
                <ul className="descriptions__body" id="result-box">
                    {props.list.map((v, i) => <Row key={i} balls={v} />)}
            </ul>
            </section >
        )
    }

    // 根节点
    function Root() {

        const [list, setList] = useState([]);

        const updateValue = (value) => {
            const list = [];
            for (let i = 0; i < value; i++) {
                list.push(getOne());
            }
            setList(list);
        }

        return (
            <Fragment>
                <Form updateValue={updateValue} />
                <Descriptions list={list} />
            </Fragment>
        )
    }

    // 渲染jsx对象
    const root = ReactDOM.render(<Root />, document.getElementById("app"));

</script>

</html>